<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>xml文件处理</title>
	<link rel="stylesheet" type="text/css" href="../../style/public.css">
</head>
<body>
	<p id="loading" style="display:none;">加载中....</p>
	<dl id="dl"></dl>
	
</body>
	<script src="../../libraries/jquery-1.11.1.min.js"></script>
	<script type="text/javascript">
	$(function(){
		$(document).ajaxStart(function(){
	        $("#loading").show();
	    }).ajaxStop(function(){
	        $("#loading").hide();
	    });
		$.ajax({
			type: "GET",
			url: "myData.php",
			success : function(data){
				console.log(data)
				$(data).find('book').each(function(){ 

					var $book = $(this); 
					var title = $book.attr("title"); 
					var description = $book.find('description').text(); 
					var imageurl = $book.attr('imageurl'); 

					var html = '<dt><img class="bookImage" alt="" src="' + imageurl + '" /></dt>'; 
					html += '<dd><span class="loadingPic" alt="Loading" />'; 
					html += '<p class="title">' + title + '</p>'; 
					html += '<p>' + description + '</p>' ; 
					html += '</dd>'; 

					$('dl').append($(html)); 

				});	
				
			},
			error: function(status){
				console.log('失败')
			}	
		});
		
	}); 

	</script>
</html>